# 转换规则

component_rules = """
1. 对于 `div` 组件中的文本内容，应使用 `text` 组件对文本内容进行包装。
例如: 将 `<div>Hello World</div>` 转换为 `<div><text>Hello World</text></div>`。
2. 组件 `div` 不支持子组件 `span` ，请改用 `text` 或 `label`。
例如: 将 `<div><span>Hello World</span></div>` 转换为 `<div><text>Hello World</text></div>`。
3. 对于 `ul` 和 `li` 组件，应使用 `div` 代替。
例如: 将 `<ul><li></li></ul>` 转换为 `<div><div></div></div>`
4. 移除 `br` 组件。
5. 对于组件`a`中的 `href="#"`，应删除 `href="#"`。
6. 对于组件中的`v-`属性(如`v-if`)，应删除`v-`。如果该属性对应于script部分中的变量，则应改用 {{variable}}。
例 1: 将 `<div v-if="true"></div>` 转换为 `<div if="{{true}}"></div>`
例 2: 将 `<div v-for="item in items"></div>` 转换为 `<div for="{{item in items}}"></div>`
例 3: 将 `<div v-show="flag"></div>` 转换为 `<div show="{{flag}}"></div>` 且 flag 是script部分的一个变量。
7. 对于`v-bind`(或`:`)的属性，应删除`v-bind`或者`:`，并使用`{{}}`包裹其对应的变量。
例如：将<div :key="index"></div>转换为<div key="{{index}}"></div>
8. 你应该忽略代码中的注释，并且不能在代码中添加额外的注释。
11. 请你将方法直接定义在script标签内，不要将其定义在methods属性。
12. 如果有方法被定义在了methods属性中，请将其移动到script标签内并删除methods属性。
13. 你不应该移除<import>标签。
14. 去除script标签中的name属性和components属性。
15. 你应该将所有自闭和标签转为普通标签。
例如：将<input />转换为<input></input>。
16. 当你修改组件时，也应该修改style标签中相关的选择器。
"""

preprocess_rules = """
0. 如果代码不符合以下某规则，请忽略该规则。
1. 对于需要执行多个步骤的事件(例如@click="step1() && step2()")，应在script部分定义一个方法来包含这些步骤，并在template部分使用该方法。
例 1: 将 @click="step1() && step2()" 转换为 @click="step1AndStep2()" 并定义一个方法 `step1AndStep2` 在script部分中。
step1AndStep2() {
  step1();
  step2();
}
例 2: Transform @click="index ++ && step1()" 转换为 @click="indexIncrementAndStep1()"并定义一个方法 `indexIncrementAndStep1` 在script部分中。
indexIncrementAndStep1() {
  index++;
  step1();
}
2. 对于 setInterval 或 setTimeout，应使用箭头函数定义回调函数，否则回调函数中的 `this` 将不是组件实例。
例如:
setInterval(() => {
    // your code here
}, 1000)
3. 对于自增(++)或自减(--)运算，你应该修改为赋值语句。
例如：current++修改为current += 1
例如：current--修改为current -= 1
"""

general_style_rules = """
1. 请你将css转为less格式
2. 你应该使用伪类选择器`active`代替hover或focus。
例如：将 `div:hover` 转变为`div:active`
3. 对于只指定颜色的background属性，你应该使用background-color代替。
例如：将`background: red` 转变为`background-color: red`
4. 对于`display`属性，你需要将值替换为`flex`。
例如：将`display: block`转变为`display: flex`
5. 移除style标签上的scoped属性。
6. 请你在style标签上添加lang="less"
例如：<style></style>转换为<style lang="less"></style>
"""

# TODO: 待拓展
error_message_rules = """
1. 对于选择器错误，如果选择器语法正确，请删除该选择器。
2. 对于不支持的样式名，请删除他们。
3. 对于错误形如这样的错误：Property 'current' does not exist on type '{ goTo(pageIndex: any): void; goToPreviousPage(): void; goToNextPage(): void; getClassNameActive(pageIndex: any): any; }'. 
你应该检查上述提到的方法goTo、goToPreviousPagegoToPreviousPage、goToPreviousPage、goToNextPage、getClassNameActive是否直接被定义在script中，而不是在methods属性中。如果在methods属性中，请将他们移动到script标签中。
4. 你应该忽略这个错误：Do not use empty rulesets
5. 对于v-for、v-show指令，你应该将其修改为for、show指令
"""


computed_json_rules = """
请你从这段代码中提取所有计算属性的定义，对于函数体中出现的字符串，你应该进行转义。
你需要检查计算属性依赖哪些位于data中的变量，将其存储在varbales数组中
请从这段代码中提取计算属性的全部函数体，对于函数体的返回值语句，请你将其替换为this.{method_name} = xxx的形式，对于函数体的其他内容提取时请保持不变.
例如：计算属性computedValue的返回值语句return value替换为this.computedValue = value
你需要将计算属性的定义存储在computed对象中
"computed": {
    method_name: {
        "params": method_params_array,
        "body": method_body_str,
        "vars": variables_array
    }
}
"""

methods_json_rules = """
请你从这段代码中提取所有位于methods下的方法的定义，对于方法体中出现的字符串，你应该进行转义。
你需要将方法的定义存储在methods对象中
"methods": {
    method_name: {
        "params": method_params_array,
        "body": method_body_str,
        "vars": variables_array
    }
}
"""

watch_json_rules = """
请你从这段代码中提取所有位于watch下的handler方法的定义，对于方法体中出现的字符串，你应该进行转义。
你需要检查每个方法的参数，将其存储在method_params数组中。请指出。
你需要将watch的定义存储在watch对象中
"watch": {
    method_name : {
        "params": method_params_array,
        "handler": method_body_str,
        "deep": true or false
    }
}
"""

data_json_rules = """
请你从这段代码中提取所有位于data下的变量以及初始值。
你需要将data的定义存储在data对象中
"data": {
    data_name: data_value
}
"""

import_component_json_rules = """
请你从这段代码中提取所有位于components下的组件和其引用路径
你需要将components的定义存储在components对象中
"components": {
    component_name: component_path
}
"""


# --------------------------模型没有学习UX和Vue->UX，告知复杂规则时转化效果不理想--------------------
# Depercated: 模型没有学习UX和Vue->UX，告知复杂规则时转化效果不理想
class_bind_rules = """
For class binding such as `:class="{active: isActive}"`, you should define a method to describ the logic for class binding in script section. You should give it an appropriate method name and apply the method such as `class="{{getClass}}"`.
Examlpe1: 
For component `<div :class="{ active: isActive }"></div>`, you should transform it into `<div class="getActiveClass">` and define a method `getActiveClass` in script section and it's logic is return class name string such as "active" or "".
Specially, the method is
getActiveClass() {
    if (this.isActive) {
        return "active"
    }
    return ""
}
Examlpe2:
For component `<div :class="{redBg: index == current}">`, it means the class name is "redBg" when the index is equal to the current, you should transform it into `<div class="getRedBgClass(index)">` and define a method `getRedBgClass` in script section and it's logic is return class name string such as "redBg" or "".
getRedBgClass(index) {
    if (index == this.current) {
        return "redBg"
    }
    return ""
}
"""

# Depercated: 模型没有学习UX和Vue->UX，告知复杂规则时转化效果不理想
v_model_rules = """
For the `v-model="value"` attribute in `input` component, you should use `value="{{ value }}"` instead and add `onchange` attribute to the `input` component and define a method to update the value in script section.
Use `event.text` to get the content input by user instead of `event.target.value`.
Example 1: 
For component `<input v-model="text">`, it means that when the user inputs content, the `text` variable will be updated. So to achieve this effect, you should transform it into `<input value="{{ text }}" onchange="updateText()">` and define a function `updateText` in script section directly.
Specially, the method is
updateText(event) {
    // use `event.text` to get the content input by user
  this.text = event.text
}
Example 2:
updateValue(event) {
    // use `event.text` to get the content input by user
  this.value = event.text
}
"""

# Depercated: 模型没有学习UX和Vue->UX，告知复杂规则时转化效果不理想
computed_rules = """
1. Computed properties are properties whose values are dynamically calculated based on other data. You should understand which variables are computed properties by checking which variables are defined under 'computed' and find out which data are dependent.
For computed property, you should define a variable to store the value in data of the script section, and define a method to calculate the value and assign the value to the variable.
Example 1: 
For computed attrbute `list`, such as 
computed: {
    list() {
        return this.subList.map(item => item.name)
    }
}
I should define a variable `list` in data method and a method `updateList` to update the variable `list` when the dependent variables change (subList in this case) and call the method in onInit method.
updateList() {
    this.list = this.subList.map(item => item.name)
},
// when `subList` is changed, call `updateList` method to update `list`
changeSubList() {
    this.subList.push({name: 'new item'})
    this.updateList()
},
onInit() {
    this.updateList()
}
2. The update method for updating computed attributes should be called within the `onInit` method.
Examlpe:
onInit() {
    this.updateList()
}

Example 2:
For computed attrbute `pages`, such as
computed: {
    pages() {
        // other logic
        return pag
    }
}
I should define a variable `pages` in data method and a method `updatePages` to update the variable `pages` when the dependent variables change (`this.current` in this case) and call the method in onInit method.
updatePages() {
    // other logic
    this.pages = pag
},
// when `this.current` is changed, call `updatePages` method to update `pages`
changeCurrent() {
    current ++;
    this.updatePages()
},
onInit() {
    this.updatePages()
}
"""

# Depercated: 模型没有学习UX和Vue->UX，告知复杂规则时转化效果不理想
script_rules = """
1. Please use the `let` or `const` to define variables, instead of `var`.
2. If you define a new variable, please write it in the `data` function of the script section.
Example: 
define a new variable `count` with initial value `0`:
data: {
    // other variables
    count: 0
}
3. You should define a method directly in the script tag, instead of using the 'methods' or 'computed' attribute.
4. For setInterval or setTimeout, you should use arrow function to define the callback function, otherwise the `this` in the callback function will not be the component instance.
Examlpe:
setInterval(() => {
    // your code here
}, 1000);
5. You should write method directly in the script tag and method name should have practical significance, instead of using the 'methods' or 'computed' attribute.
such as:
<script>
export default {
    data: {
        // your data here
    },
    // your methods here, method name should have significance
    method1() {
        // your code here
    },
    method2() {
        // your code here
    }
}
</script>
6. You do not need to change the method name in the script section and anything in template section.
"""
